<!-- 选择框组件 -->
<script lang="ts" setup>
import { Check, Minus } from '@element-plus/icons-vue'
import type { MuiCheckStatus } from './type'
import type { PropType } from 'vue'
defineProps({
  // 状态
  status: {
    type: String as PropType<MuiCheckStatus>,
    default: 'noCheck'
  },
  // 是否多选-多选方形框、单选原形框
  multiple: {
    type: Boolean,
    default: false
  }
})
</script>

<template>
  <div class="dui-check-bg" :class="{ checked: status != 'noCheck', single: !multiple }">
    <el-icon color="white" :size="12">
      <Minus v-if="status == 'checking'" />
      <Check v-if="status == 'checked'" />
    </el-icon>
  </div>
</template>

<style lang="scss" scoped>
.dui-check-bg {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid lightgray;
  border-radius: 2px;
  background: white;
  cursor: pointer;
  box-sizing: border-box;
}
.dui-check-bg:hover {
  border-color: $color-primary;
}
.dui-check-bg.checked {
  background: $color-primary;
  border-color: $color-primary;
}
.dui-check-bg.single {
  border-radius: 50%;
}
</style>
